<template>
  <div>
    <div style="padding: 20px">
      <h3>驾驶证信息</h3>
      <Row style="margin: 25px 0;">
        <Col span="10" style="text-align: right">
          驾驶证号： <Input v-model="license.licenseNumber" placeholder="请输入驾驶证号" :disabled="disFlag" style="width: 320px" />
        </Col>
        <Col span="10" style="text-align: right">
          准驾车型： <Input v-model="license.allowableType" placeholder="请输入准驾车型" :disabled="disFlag" style="width: 320px" />
        </Col>
      </Row>
      <Row style="margin: 25px 0;">
        <Col span="10" style="text-align: right">
          初次领证时间：
          <el-date-picker
            v-model="license.initialCertificateDate"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            type="date"
            style="width: 320px"
            :disabled="disFlag"
            placeholder="请输入初次领证时间">
          </el-date-picker>
        </Col>
        <Col span="10" style="text-align: right">
          驾证有效期限： <Input v-model="license.validPeriod" placeholder="请输入驾证有效期限" :disabled="disFlag" style="width: 320px" />
        </Col>
      </Row>
      <Row style="margin: 25px 0;">
        <Col span="10" style="text-align: right">
          驾龄： <Input v-model="license.driverAge" placeholder="请输入驾龄" :disabled="disFlag" style="width: 320px" />
        </Col>
        <Col span="10" style="text-align: right">
          驾驶证类型： <Input v-model="license.licenseType" placeholder="请输入驾驶证类型" :disabled="disFlag" style="width: 320px" />
        </Col>
      </Row>
      <Row style="margin: 25px 0;">
        <Col span="10" style="text-align: right">
          从业资格证： <Input v-model="license.qualificationCertificate" placeholder="请输入从业资格证" :disabled="disFlag" style="width: 320px" />
        </Col>
        <Col span="10" style="text-align: right">
          入场证信息： <Input v-model="license.passCertificate" placeholder="请输入入场证信息" :disabled="disFlag" style="width: 320px" />
        </Col>
      </Row>
      <hr>
      <h3 style="margin: 10px">图片信息</h3>
      <Upload
        multiple
        type="drag"
        name="myfile"
        v-model="license.picture"
        action="/api/pd-baseyc/pd-truck-driver/uploadcontroller"
        :on-success="uploadSuccess"
        style="width: 100px;height: 100px;">
        <div style="padding: 20px 0">
          <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
        </div>
      </Upload>
      <hr>
      <Row v-if="flag1">
        <Col style="text-align: center" span="22">
          <Button type="warning"  style="margin:10px;width: 120px" @click="exitLicense" >编辑</Button>
        </Col>
      </Row>
      <Row v-if="flag2">
        <Col style="text-align: right" span="11">
          <Button type="info"  style="margin:10px;width: 120px" @click="saveLicense">保存</Button>
        </Col>
        <Col style="text-align: left" span="12">
          <Button   style="margin:10px;width: 120px" @click="cancelLicense">取消</Button>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data(){
    return{
      flag1 : true,
      flag2 : false,
      disFlag: true,
      license:{},
    }
  },
  created(){
    // console.log(this.$route.query.id)
    this.queryLicenseInfo();
  },
  methods:{
    queryLicenseInfo:async function(){
      var rsp = await axios.post("/api/pd-baseyc/pd-truck-driver/queryLicenseByUserId/"+this.$route.query.id);
      // console.log(rsp.data);
      this.license = rsp.data;

    },

    // 编辑驾驶证信息
    exitLicense(){
      this.flag1 = false;
      this.flag2 = true;
      this.disFlag = false;
    },

    // 文件上传成功
    uploadSuccess(response, file, fileList){
      this.license.picture = response;
      // console.log(response);
      // console.log(file);
      // console.log(fileList);
    },

    // 文件上传失败
    uploadError(){

    },


    // 保存编辑信息
    saveLicense:async function(){
      var rsp = await axios.post("/api/pd-baseyc/pd-truck-driver/updLicenseById",this.license);
      if (rsp.data==true){
        // success
        this.queryLicenseInfo();
      }
      this.flag1 = true;
      this.flag2 = false;
      this.disFlag = true;
    },

    // 取消
    cancelLicense(){
      this.flag1 = true;
      this.flag2 = false;
      this.disFlag = true;
    }

  }
}
</script>

<style scoped>

</style>
